<template>
	<view>
		<view class="form-box-production">
			<view class="pro-item" @click="fnSelect">
				<text class="item-label">基地名称</text>
				<text class="item-value long" v-if="form.baseName">{{ form.baseName }}</text>
				<text class="item-value-placeholder" v-else="form.baseName">请选择基地</text>
			</view>
			<view class="pro-item">
				<text class="item-label">例会日期</text>
				<view class="item-value" @click="datePopup = true">
					<text>{{ getDate(form.meetingDate) }}</text>
					<view class="item-time">
						<u-icon name="arrow-down" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="space-box"></view>
		<view class="form-box-production">
			<view class="item-picture-title">
				<text>例会资料</text>
				<view class="picture-box">
					<u-upload :fileList="recordListImg" @afterRead="uploadImage($event, 'record')"
						@delete="deleteImage($event, 'record')" name="Img" multiple :maxCount="9"
						:previewFullImage="true" accept="image" width="200rpx" height="200rpx"></u-upload>
				</view>
			</view>
		</view>
		<!-- 选择项弹窗 -->
		<view v-if="datePopup">
			<u-datetime-picker @cancel="datePopup=false" @confirm="dateConfirm" :maxDate="new Date().getTime()"
				:show="datePopup" v-model="dateTime" mode="date"></u-datetime-picker>
		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit" :loading="isLoading" class="button-primary">提交</button> 
			</view>
		</view>


	</view>
</template>
<script>
	import mixins from "@/utils/mixins.js"
	import {
		imgFun
	} from "@/utils/common.js";
	import {
		uploadFile
	} from '@/utils/request'
	import {
		yieldMeetingSave
	} from "@/api/qualitySafetyManagement/qualitySafetyManagement.js"
	export default {
		name: 'production_form',
		mixins: [mixins],
		data() {
			return {
				form: {
					meetingDate: Number(new Date()),
					baseId: null,
					baseName: null,
					meetingDoc: null //消防器材巡视图片

				},
				recordListImg: [],
				datePopup: false,
				dateTime: Number(new Date()),
				isLoading: false
			}
		},
		mounted() {
			this.dateTime = this.getDate(this.dateTime)
		},
		methods: {
			fnSelect() {
				uni.navigateTo({
					url: `/subpackage-plasmosafety/pages/qualitySafetyManagement/regularMeeting/regular_select_station`,
					events: {
						setData: (data) => {
							console.log(data.data, '项目/基地');
							let result = data.data
							this.$set(this.form, 'baseName', result.name)
							this.$set(this.form, 'baseId', result.id)
						}
					},
				})
			},
			async uploadImage(event, type) {
				for (var item in event.file) {
					console.log(event.file[item].type)
					if (event.file[item].type == 'image') {
						event.file[item].url = await imgFun(event.file[item])
						event.file[item].thumb = await imgFun(event.file[item])
					}
					if (type === 'record') {
						this[`recordList${event.name}`].push({
							...event.file[item],
							status: 'success',
							message: ''
						})
					} else {
						throw new Error('上传图片类型错误！')
					}

				}
			},
			deleteImage(event, type) {
				if (type === 'record') {
					this[`recordList${event.name}`].splice(event.index, 1)
				} else {
					throw new Error('删除图片类型错误！')
				}

			},
			dateConfirm(val) {
				this.form.meetingDate = this.getDate(val.value)
				this.datePopup = false
			},
			validateRequired() {
				if (!this.form.baseName) {
					uni.showToast({
						title: '请选择基地',
						icon: 'none',
						mask: true
					})
					return false
				}
				if (!this.form.meetingDate) {
					uni.showToast({
						title: '请选择例会日期',
						icon: 'none',
						mask: true
					})
					return false
				}

				if (this.recordListImg.length === 0) {
					uni.showToast({
						title: '请上传例会资料照片',
						icon: 'none',
						mask: true
					})
					return false
				}
				return true
			},
			async submit() {
				if (!this.validateRequired()) return
				if(this.isLoading) return
				this.isLoading = true
				//例会资料
				let fileList1 = [...this.recordListImg]
				for (let item of fileList1) {
					let formData = {}
					if (this.form.meetingDoc) {
						formData.docId = this.form.meetingDoc
					}
					let data = await uploadFile({
						url: "rest/doc/uploadDoc",
						formData,
						filePath: item.url
					})
					let res = JSON.parse(data)
					if (!res.success){
						this.isLoading = false
						 return
					}
					
					this.form.meetingDoc = res.result.id
				}
				// console.log(this.form,'---入参---');
				// return
				let res = await  yieldMeetingSave({ ...this.form })
				if (res.success){
					uni.showToast({
						title: res.message,
						icon: 'none',
						mask: true,
					})
					this.form = {},
					this.dateTime = Number(new Date())
					this.recordListImg = []
					this.form.meetingDate = Number(new Date())
					this.isLoading = false
				}else {
					this.isLoading = false
				}
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.form-box-production {
		padding: 0 40rpx;
		background: #fff;

		.pro-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding: 30rpx 0;
			border-bottom: 4rpx solid #f4f6f9;

			.item-label ::before {
				content: "*";
				color: #FF6A6A;
			}

			.item-label {
				font-size: 32rpx;
			}

			.item-value {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: bold;
				color: #22204E;

				.item-time {
					margin-left: 30rpx;
					// padding-top: 10rpx;
				}

				.unit {
					margin-left: 10rpx;
				}
			}

			.item-value.long {
				display: block;
				max-width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.item-value-placeholder {
				font-size: 30rpx;
				font-weight: bold;
				color: #c0c4cc;
			}
		}

		.item-picture-title {
			padding: 30rpx 0;

			text {
				font-size: 32rpx;
			}

			text ::before {
				content: "*";
				color: #FF6A6A;
			}

			.picture-box {
				margin-top: 20rpx;
			}

		}
	}

	.space-box {
		background-color: #f5f7fb;
		height: 40rpx;
	}

	/deep/ .uni-input-placeholder {
		padding-left: 160rpx;
	}

	/deep/ .uni-input-input {
		text-align: right;
	}
	.footer-button {
		height: 154upx;
		
		.button-placeholder {
			height: 100%;
		}
		
		.button-group {
			height: 154upx; 
			padding: 30upx; 
			box-sizing: border-box; 
			background: #fff; 
			position: fixed; 
			width: 100vw; 
			bottom: 0; 
			z-index: 1;
			
			.button-primary {
				background: #2f80ed; 
				border-radius: 4upx; 
				color: #fff; 
				font-weight: bold; 
				line-height: 92upx; 
				text-align: center;
			}
		}
	}
</style>